<template>
<div>
  <tab-bar></tab-bar>
  <transition :name="transitionName">
      <router-view></router-view>
  </transition>
  <g-footer></g-footer>
</div>
</template>

<script>
import TabBar from './components/tabbar/TabBar'
import GFooter from "./components/gfooter/GFooter";
// import GFooter from './components/gfooter/GFooter'
export default {
    components: {
        GFooter,
        TabBar},
    name: "app",
    data(){
        return{
            transitionName:"slide-right"
        }
    },
    watch:{
        $route(to,from){
            let isBack = this.$router.isBack;
            if(isBack){
                this.transitionName = "slide-right";
            }else{
                this.transitionName = "slide-left";
            }
            this.$router.isBack = false;
        }
    }
}
</script>

<style>

  /*.slide-left-enter {*/
      /*opacity: 0;*/
      /*-webkit-transform: translate(30px, 0);*/
      /*transform: translate(30px, 0);*/
  /*}*/
  /*.slide-left-enter-active{*/
      /*transition: all .5s ease;*/
  /*}*/
  /*.slide-left-leave-to{*/
      /*opacity: 0;*/
      /*-webkit-transform: translate(-30px, 0);*/
      /*transform: translate(-30px, 0);*/
  /*}*/
  /*.slide-left-leave-active {*/
      /*transition: all .5s ease;*/
  /*}*/
</style>
